<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      @input="onSearch"
      background="#efeff4"
      placeholder="请输入搜索关键词"
      @cancel="onCancel"
    />

    <ul class="uls">
      <li ref="huoqu" @click="tz(k)">{{ k }}</li>
      <li ref="huoqu" @click="tz(d)">{{ d }}</li>
      <li ref="huoqu" @click="tz(s)">{{ s }}</li>
      <li ref="huoqu" @click="tz(t)">{{ t }}</li>
      <li ref="huoqu" @click="tz(c)">{{ c }}</li>
      <li ref="huoqu" @click="tz(e)">{{ e }}</li>
    </ul>

    <img class="img1" src="../../public/imgs/tit1.png" alt="" />
    <van-list
      class="listx"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list">
        <div
          class="items"
          v-for="item in filterlist"
          :key="item._id"
          @click="godetail(item._id)"
        >
          <img class="img2" :src="item.coverImg" alt="" />
          <p>{{ item.name }}</p>
          <span>60天销量1000+</span>
          <p class="p1">￥{{ item.price }}</p>
          <p class="p2">库存：{{ item.quantity }}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { reqProductsAPI } from '../api/product'
export default {
  components: {},
  data() {
    return {
      value: '',
      k: '口红',
      d: '电视',
      s: '手表',
      t: '台灯',
      c: '唇釉',
      e: '耳机',
      per: 120,
      list: [],
      page: 1,
      loading: false, //用于控制加载...
      finished: false,
      data: [],
    }
  },
  computed: {
    filterlist() {
      return this.list.filter((item) => item.name.indexOf(this.value) > -1)
    },
  },

  watch: {},

  methods: {
    tz(e) {
      this.value = e
    },
    onClickLeft() {
      Toast('返回')
    },
    onClickRight() {
      Toast('按钮')
    },

    onCancel() {
      Toast('取消')
    },
    onLoad() {
      this.getlist()
    },
    async getlist() {
      this.loading = true
      const res = await reqProductsAPI({ per: this.per })
      console.log(res)
      this.loading = false

      this.list = res.products
      // console.log(this.list)
      // if (res.products.length < 10) {
      //   this.finished = true // 如果这个参数是true说明已经不能再请求数据
      // } else {
      //   this.page++ //如果还有数据页码+1
      // }
    },
    // async datafun() {
    //   const res = await reqProductsAPI()
    //   this.data = res.totalCount
    //   console.log(this.data)
    // },
    onSearch() {
      if (this.value) {
        return this.list.filter((item) => item.name.indexOf(this.value) > -1)
      } else {
        this.getlist()
      }
    },
    godetail(id) {
      // this.$router.push("/detail?id=" + id);

      // query既可以和path配合使用，也可以和name配合使用，刷新参数不丢失
      this.$router.push({
        path: '/detail',
        query: {
          id,
        },
      })
    },
  },
  created() {},
  mounted() {},
}
</script>
<style scoped>
.van-hairline--top {
  font-size: 14px;
  font-weight: 600;
  color: black;
  /* background-color: black; */
}
.img1 {
  width: 100vw;
  margin-bottom: 20px;
  margin-top: 10px;
}
.van-field__control {
  color: black;
  margin: 0;
  padding: 0;
}
.van-field__control {
  color: aliceblue;
}
.list {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.uls {
  width: 99%;
  height: 100px;
  /* border: black 1px solid; */
  justify-content: space-between;
}
.uls li {
  margin: 0 auto;
  width: 32.84%;
  height: 46px;
  float: left;
  text-align: center;
  line-height: 46px;
  border: 1px solid #eee;
  border-right: none;
}
.items {
  /* margin: 10px 10px 1px 1px; */
  position: relative;
  padding: 0;
  width: 46%;
  height: 280px;
  box-shadow: 0px 0px 4px #7d7b7b;
  border-radius: 10px;
  box-sizing: border-box;
  float: left;
  margin: 10px 0;
  background-color: #f2f1f6;
}
.img2 {
  margin-top: 10px;
  width: 100%;
  height: 65%;
}
span {
  display: block;
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
  columns: #666666;
}
.p1 {
  font-weight: 600;
  position: absolute;
  bottom: 0px;
  color: red;
}
.p2 {
  font-size: 12px;
  position: absolute;
  bottom: 0px;
  right: 2%;
  color: black;
}
.listx {
  margin-bottom: 50px;
}
</style>
